<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>108saveUeHtml</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
body{
	padding-left: 20px;
	background: #eee;
}
.main {
	width: 780px;
	background: #fff;
	margin-left: auto;
	margin-right: auto;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
}
.btngroup {
	width: 20%;
	float: left;
}
.tplbtn {
	margin: 0 5px 5px 0;
}
.edui-editor {
	border:0 !important;
}
.edui-default{
	border:0 !important;
}
.edui-editor .edui-default{
	border:0 !important;
}
/* edui-editor-toolbarbox edui-default */
.edui-editor-toolbarbox {
	display: none;
}
</style>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js?v=111"></script>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js?v=111"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js?v=111"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/third-party/jquery-1.10.2.min.js"></script>
</head>
<body>
<h3>108saveUeHtml</h3>
<div class="btngroup" id="btngroup">
	<input type="button" id="idSave" value="=保存=" />
</div>
<div class="main">
	<!--
		* http://www.css88.com/book/css/rules/!important.htm
		* !important 参考手册 
	 -->
    <script id="editor" type="text/plain" style="width:700px;height:800px;margin-left:auto;margin-right:auto;border:0 !important;"></script>
</div>


<script type="text/javascript">
	
	var _ctx = "${pageContext.request.contextPath}";

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    /* var ue = UE.getEditor('editor'); */
    var ue = UE.getEditor('editor', {toolbars:[[]],wordCount:false,elementPathEnabled:false});
    
    $(function(){
    	/*
    	 * funcLoadTpl
    	 * 被按钮调用,用来加载模板
    	 */
    	var funcLoadTpl = function(tplName, id){
    		if(tplName){
    			$('#'+id).attr('disabled', 'disabled');
    			$.ajax({
        			type: 'POST',
        			url: _ctx + '/my/fetchOneTplByName',
        			data: {"tplName": tplName},
        			success: function(_data){
        				if(_data){
        					var isAppendTo = false;
        					// 插入内容前,先清空编辑器
        					UE.getEditor('editor').setContent('', isAppendTo);
        					UE.getEditor('editor').execCommand('insertHtml', _data);
        				}
        				$('#'+id).removeAttr('disabled');
        			},
        			error: function(_data){
        				console.log(_data);
        				$('#'+id).removeAttr('disabled');
        			}
        		});
    		}
    	};
    	$.ajax({
			type: 'POST',
			url: _ctx + '/my/fetchAllTpls',
			data: {},
			success: function(_data){
				if(_data){
					//TODO: 
					var tpl = "<option value='{1}'>{1}</option>";
					var btnTpl = '<input class="tplbtn" type="button" id="{1}" value="{2}">';
					$.each(_data, function(i,n){
						/**
						 * http://www.w3school.com.cn/jsref/jsref_replace.asp
						 * `replace`的用法见上面网址的介绍
						 */
						var btn = btnTpl.replace(/\{1\}/g, 'tplbtn_'+i).replace(/\{2\}/g, n);
						$(btn).appendTo( $('#btngroup') );
						$('#tplbtn_'+i).on('click', function(){
							funcLoadTpl(n, 'tplbtn_'+i);
						});
					});
				}
			},
			error: function(_data){
				console.log(_data);
			}
		});
    	
    	$('#idSave').on('click', function(){
    		
    		var _content = ue.getAllHtml();
    		// console.log( _content );
    		
    		$.ajax({
    			type: 'POST',
    			url: _ctx + '/rhc/saveUeHtml',
    			data: {"content": _content},
    			success: function(_data){
    				console.log(_data);
    			},
    			error: function(_data){
    				console.log(_data);
    			}
    		});
    	});
    });
    
</script>
</body>
</html>